<template>
    <div class="FurnaceSlag" :style="popupStyle">
        <div class="item" v-for="(item, index) in state.dataList">
            <div class="itemLeft">
                <div class="square" :class="squareClass(item)"></div>
                <div>{{ item.name }}</div>
            </div>
            <div class="temp">{{ item.temperature }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { dataTool } from 'echarts';


const props = defineProps({
    top: {
        type: String,
        default: '0px'
    },
    left: {
        type: String,
        default: '0px'
    },
    data: {
        type: Object,
        default: {}
    }
})
let popupStyle = reactive({
    position: 'absolute' as 'absolute',
    top: props.top,
    left: props.left,
})

let state = reactive({
    dataList: [
        { num: 1, name: '左侧干燥漏渣馏管温度控制阀A', temperature: '180.2℃' },
        { num: 2, name: '左侧干燥漏渣馏管温度控制阀A', temperature: '178.6℃' },
        { num: 2, name: '左侧干燥漏渣馏管温度控制阀A', temperature: '128.4℃' },
        { num: 3, name: '左侧干燥漏渣馏管温度控制阀A', temperature: '168.5℃' },
        { num: 2, name: '左侧干燥漏渣馏管温度控制阀A', temperature: '138.9℃' },
    ] as any,
    dataName: '',
    dataDetail: [
    ]
})
const squareClass = (item: any) => {
    switch (item.num) {
        case 1:
            return 'red';
        case 2:
            return 'blue';
        case 3:
            return 'green';
        default:
            return '';
    }
}
// state.dataList = props.data.dataList
// state.dataName = props.data.dataName
console.log('popupStyle', popupStyle);

</script>

<style lang="scss" scoped>
.FurnaceSlag {
    width: vh(418);
    min-height: vh(100);
    z-index: 999;
    background: rgba(0, 25, 35, 0.8);
    border: vh(1) solid #00B1E1;
    padding-left: vh(14);
    padding-right: vh(15);
    padding-top: vh(18);

    .item {
        // border: 1px solid #ddd;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(12);
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: vh(18);

        .itemLeft {
            display: flex;
            align-items: center;

            .square {
                width: vh(10);
                height: vh(10);
                background: #FF3232;
                border-radius: 50%;
                margin-right: vh(8);
            }

            .red {
                background: #FF3232;
            }

            .blue {
                background: #00B1E1;
            }

            .green {
                background: #00FFA8;
            }


        }

        .temp {
            color: #00C9FF;
        }
    }
}
</style>